@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?802pv0');
  src:  url('fonts/icomoon.eot?802pv0#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?802pv0') format('truetype'),
    url('fonts/icomoon.woff?802pv0') format('woff'),
    url('fonts/icomoon.svg?802pv0#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
*{
	margin: 0;
	padding: 0;
	font-family: 微软雅黑;
}
.header{
	width: 100%;
	height: 120px;
	position: relative;
	// background-color: pink;
		.logo{
			width: 83px;
			height: 77px;
			line-height:120px ;
			margin-left: 40px;
			float: left;
			img{
				width: 100%;
				height: 100%;
				vertical-align: middle;
				}
			
			}
		.h_right{
			width: 700px;
			height: 100%;
			// float: right;
			float: right;
			
			ul{
				
				display: flex;
				justify-content: space-around;
				// 主轴
				list-style: none;
				width: 600px;
				height: 100%;
				align-items: center;
				// 交叉轴 先控制交叉轴
				
				
				li{
					position: relative;
					cursor: pointer;
					&:hover::before, &:hover::after{
						width: 40px;
						
					}
					&:hover:nth-last-child::before{
						width: 40px;
					}
					&::before{
						content: "";
						width: 0px;
						height: 1px;
						background-color: #d6d6d6;
						position:absolute;
						left: -26px;
						top: 2px;
						transform: rotate(-52deg);
						transition: all .5s;
						
					}
					
					&::after{
						content: "";
						width: 0px;
						height: 1px;
						background-color: #d6d6d6;
						position:absolute;
						right: -21px;
						bottom: -2px;
						transform: rotate(-52deg);
						transition: all .5s;
					}
					
					h1{
						font-size: 18px;
						font-weight: bold;
					}
					p{
						font-size: 14px;
						color: #8d8d8d;
						text-align: center;
					}
					img{
						
					}
					
				}
				
			}
			
		}
		.h_weixin{
			width: 70px;
			height: 23px;
			margin-bottom: 13px;
			display: inline-block;
			position: absolute;
			right: 0px;
			bottom: 35%;
			// margin-left: 100px;
			img{
				width:23px;
				height: 100%;
			}	
	}
}

.section{
	width: 100%;
	.big_img{
		width: 100%;
		height: 632px;
		background-color: #222222;
		display: flex;
		justify-content: center;
		.middle{
			margin-top: 50px;
		}
		.game{
			margin: 0 10px 0;
		}
		.left_icon,.right_icon{
			display: flex;
		}
		.left{
			.hand{
				display: flex;
				justify-content: flex-end;
			}
			.left_icon{
				margin-top: 20px;
			}
		}
		.middle{
			margin-left: 20px;
			margin-right: 20px;
			position: relative;
			.game_hid {
				margin: 0 24px 0;
				width: 215px;
				height: 495px;
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				/* visibility: hidden; */
			}
			.midd_phone {
				position: relative;
			}
		}
		.right{
			.right_title{
				height: 417px;
				border: 1px solid #222222;
				h2{
					margin-top: 80px;
					font-size: 31px;
					color: #11ac9f;
				}
				h1{
					font-size: 39px;
					color: #11ac9f;
					margin-bottom: 10px;
				}
				p{
					font-size: 20px;
					color: #929292;
				}
			}
			.right_icon{
				margin-top: 20px;
			}
			button{
				margin-top: 20px;
				background-color: #11ac9f;
				width: 133px;
				height: 51px;
				border: 0px;
				border-radius: 25px;
				color: white;
				font-size: 18px;
				font-weight: bold;
			}
			
		}
	}
	.step{
		width: 1000px;
		height: 276px;
		margin: 0 auto;
		// background-color: pink;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 40px;
		.s_fist{
			width: 195px;
			height: 276px;
			// background-color: blue;
			.fist_img{
				width: 100%;
				height: 180px;
				text-align: center;
				margin-bottom: 10%;
				img{
					max-width: 100%;
					max-height: 100%;
					text-align: center;
				}
			}
			h1{
				font-size: 22px;
				font-weight: bold;
				text-align: center;
				line-height: 2;
				font-style: italic;
			}
			p{
				text-align: center;
			}
		}
		.s_second{
			width: 228px;
			height: 276px;
			// background-color: red;
			.fist_img{
				width: 100%;
				height: 180px;
				text-align: center;
				margin-bottom: 10%;
				img{
					max-width: 100%;
					max-height: 100%;
					text-align: center;
					vertical-align: bottom;
				}
			}
			h1{
				font-size: 22px;
				font-weight: bold;
				text-align: center;
				line-height: 2;
				font-style: italic;
			}
			p{
				text-align: center;
			}
		}
		.s_third{
			width: 221px;
			height: 276px;
			// background-color: purple;
			.fist_img{
				width: 100%;
				height: 180px;
				text-align: center;
				margin-bottom: 10%;
				line-height: 180px;
				img{
					max-width: 100%;
					max-height: 100%;
					display: inline-block;
					text-align: center;
					vertical-align: bottom;
				}
			}
			h1{
				font-size: 22px;
				font-weight: bold;
				text-align: center;
				font-style: italic;
				line-height: 2;
			}
			p{
				text-align: center;
			}
		}
	}
	.madgame{
		width: 1000px;
		height: 542px;
		margin: 80px auto 0;
		// background-color: skyblue;
		.title{
			h1{
				font-size: 35px;
				font-weight: bold;
				vertical-align: top;
				span{
					width: 300px;
					display: inline-block;
					line-height: 1.5;
					font-size: 12px;
					color: #bebebe;
				}
			}
			P{
				font-size: 18px;
				span{
					font-weight: bold;
				}
			}
		}
		.mgame{
			width: 100%;
			height: 447px;
			// background-color: palegreen;
			margin-top: 20px;
			display: flex;
			justify-content: space-between;
			.iconstar::before{
				font-size: 25px;
			}
			.mg1{
				width: 297px;
				height: 447px;
				background-color: #eaeaea;
				border-radius: 5px;
				
				
				.mg_title{
					width: 259px;
					height: 78px;
					margin: 10px auto 20px;
					position: relative;
					
					h1{
						width: 200px;
						font-size: 24px;
						font-weight: bold;
					}
					p{
						font-size: 14px;
						color: #bebebe;
						margin-top: 10px;
						position: relative;
						span{
							display: block;
						}
						&::before{
							content: "";
							width: 30px;
							height: 1px;
							background-color:#bebebe;
							 position:absolute;
							 left: 0px;
							 bottom: -10px;;
						}
					}
					.mg_btn{
						display: inline-block;
						text-align: center;
						line-height: 24px;
						font-weight: bold;
						border-radius: 20px;
						width: 58px;
						height: 24px;
						background-color: #12b5a7;
						color: white;
						font-size: 14px;
						position: absolute;
						top: 0;
						right: 0;
					}
					a:hover{
						text-decoration: none;
						color: #bebebe;
					}
					.mg_icon{
						position: absolute;
						bottom: 8px;
						right: 0;
						
					}
					
				}
				.mg_img{
					width: 297px;
					height: 339px;
					img{
						width: 297px;
						height: 339px;
						border-radius: 5px;
					}
				}
				
			}
		}
	}
	.casegame{
		width: 100%;
		display: flex;
		margin-top: 20px;
		align-items: flex-end;
		justify-content: space-between;
		flex-wrap: wrap;
		.cg{
			margin-top: 20px;
			width: 457px;
			height: 173px;
			background-color: seagreen;
			border: 1px solid #eae9e9;
			
			display: flex;
			.cg_left{
				width: 55px;
				height: 100%;
				font-size: 0;
				display: inline-block;
				.l_center{
					height: 57px;
					background-color: #fed736;
					text-align: center;
					h1{
						font-size: 26px;
					}
					p{
						font-size: 12px;
					}
				}
				.l_icon{
					height: 57px;
					background-color: black;
					color: white;
					font-size: 30px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			.cg_center{
				width: 195px;
				height: 123px;
				padding: 25px;
				text-align: right;
				h1{
					font-size: 16px;
					font-weight: bold;
					margin-bottom: 18px;
				}
				p{
					line-height: 1.5;
				}
			}
			.cg_right{
				width: 157px;
				height: 100%;
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
footer{
	
	width: 100%;
	.footer_img{
		margin-top: 120px;
		position: relative;
		.foot_right{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 237px;
			height: 164px;
			img{
				max-width: 100%;
				max-height: 100%;
			}
		}
		.foot_left{
			position: absolute;
			right: 0;
			bottom: 0;
			width: 237px;
			height: 164px;
			img{
				max-width: 100%;
				max-height: 100%;
			}
		}
		p{
			
			color: white;
			background-color: #08CDCF;
			width: 100%;
			height: 80px;
			text-align: center;
			line-height: 80px;
		}
	}
}